<template>
  <div class="card flex-column" style="background-color: aliceblue;gap: 8px;">
    <div class="flex-row" style="justify-content: space-between;">
      <div style="position: absolute;bottom: 8px;right: 8px;font-size: 14px;" >推荐率:&nbsp;<span style="color: rgb(76, 175, 80);font-weight: 800;">{{ (userInfo.similarity*100).toFixed(2) }}%</span></div>
      <div style="font-size: 16px">{{userInfo.name}}</div>
      <!-- <el-tag size="small" effect="dark" type="success">{{ userInfo.title }}</el-tag> -->
    </div>
    <div style="font-size: 14px;"><span>{{userInfo.university}} {{ userInfo.department }}</span></div>
    <div  class="flex-row" style="justify-content: space-between;">
      <div class="flex-row" style="gap: 4px;flex-wrap: wrap;">
        <el-tag  type="warning" v-for="item in userInfo.searchWay" :key="item">{{item}}</el-tag>
      </div>
      <el-link @click="lookMore" type="primary" style="font-size: 12px;position: absolute;right: 16px;top: 16px;">查看更多<i class="el-icon-right"></i></el-link>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    userInfo: {  
      type: Object,  
      // 使用函数返回默认值，确保每个组件实例都有独立的默认值  
      default: function () {  
        return {};  
      }  
    }  
  },
  methods:{
    lookMore(){
      this.$router.push({ name: 'teacherDetail', params: { id: this.userInfo.id, university: this.userInfo.university, name: this.userInfo.name, department: this.userInfo.department, toType: 1 } });
    }
  }
}
</script>

<style scoped>

.card{
    width:270px;
    height: 150px;
    /* margin-top: 16px; */
    font-family: pfsc-b;
    font-size: 14px;
    padding: 16px 16px;
    position: relative;
}
</style>